<template>
  <div class="phoneinfo">
    
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
      />
    </van-dropdown-menu>
    <div class="phoneEly"></div>
    <!-- 卡片 -->
    <van-card
    class="listInfo"
    v-for="item in listInfo"
    :key="item.proid"
      :price="item.originprice"  
      :title="item.proname"
      :thumb="item.img1"
       :thumb-link="'#/phoneListInfo/'+item.proid"
    />
  </div>
</template>

<script>
import {categorybrandprolist} from "@/api/goods"
export default {
 
  data() {
    return {
      listInfo:[],
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    };
   
  },
   // 接收参数
    props:['category','brand'],
    // 方法
    methods:{
     async categorybrandpro(params){
      const res=await categorybrandprolist(params)
      this.listInfo=res.data.data
     }
    },
    created(){
      this.categorybrandpro({
        limitNum:10,
        category:this.category,
        brand:this.brand
      })

    }

}
</script>

<style lang="scss" scoped>
.phoneinfo {
  margin-top: 50px;
  .phoneEly{
     height:30px;
  width:100%;
  background-color:#f66;
  }
}
.listInfo{
  // margin-top: 50px;
  .van-card__price-currency{
     color: red;
  }
  .van-card__price-integer{
    color: red;
  }
  .van-card__title{
    font-size:14px
  }
}

</style>
